/**
 * 常用组件样式工具类
 * 提供按钮、卡片、下拉菜单等常用组件的样式类
 * 注意：部分样式仅 H5 平台支持（如 hover、transition）
 */

/* 按钮样式 */
.btn {
	padding: $uni-spacing-col-sm $uni-spacing-row-base;
	border-radius: $uni-border-radius-base;
	font-size: $uni-font-size-base;
	text-align: center;
	cursor: pointer;
	transition: all 0.2s ease;
	border: none;
	background-color: transparent;
}

.btn-primary {
	background-color: $uni-color-primary;
	color: $uni-text-color-inverse;
}

.btn-success {
	background-color: $uni-color-success;
	color: $uni-text-color-inverse;
}

.btn-warning {
	background-color: $uni-color-warning;
	color: $uni-text-color-inverse;
}

.btn-error {
	background-color: $uni-color-error;
	color: $uni-text-color-inverse;
}

.btn-ghost {
	border: 1px solid $uni-border-color;
	color: $uni-text-color;
}

/* #ifdef H5 */
.btn:hover {
	opacity: 0.9;
}

.btn-primary:hover {
	background-color: darken($uni-color-primary, 10%);
}

.btn-success:hover {
	background-color: darken($uni-color-success, 10%);
}

.btn-warning:hover {
	background-color: darken($uni-color-warning, 10%);
}

.btn-error:hover {
	background-color: darken($uni-color-error, 10%);
}

.btn-ghost:hover {
	background-color: $uni-bg-color-hover;
}
/* #endif */

/* 卡片样式 */
.card {
	background-color: $uni-bg-color;
	border-radius: $uni-border-radius-lg;
	padding: $uni-spacing-row-base;
}

.card-shadow {
	/* #ifdef H5 */
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	/* #endif */
}

.card-border {
	border: 1px solid $uni-border-color;
}

/* 下拉菜单样式 */
.dropdown-menu {
	background-color: $uni-bg-color;
	border-radius: $uni-border-radius-lg;
	border: 1px solid $uni-border-color;
	/* #ifdef H5 */
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
	/* #endif */
}

.dropdown-item {
	padding: $uni-spacing-col-base $uni-spacing-row-lg;
	cursor: pointer;
	white-space: nowrap;
	transition: all 0.2s ease;
}

/* #ifdef H5 */
.dropdown-item:hover {
	background-color: #f5f7fa;
	color: $uni-color-primary;
}

.dropdown-item.active {
	color: $uni-color-primary;
	background-color: #e6f7ff;
}
/* #endif */

.dropdown-divider {
	height: 1px;
	background-color: #e4e7ed;
	margin: $uni-spacing-col-sm 0;
}

/* 链接样式 */
.link {
	color: $uni-color-primary;
	cursor: pointer;
	text-decoration: none;
	transition: color 0.2s ease;
}

/* #ifdef H5 */
.link:hover {
	color: darken($uni-color-primary, 10%);
	text-decoration: underline;
}
/* #endif */

/* 分隔线 */
.divider {
	height: 1px;
	background-color: $uni-border-color;
	width: 100%;
}

.divider-vertical {
	width: 1px;
	height: 100%;
	background-color: $uni-border-color;
}

/* 遮罩层 */
.mask {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: $uni-bg-color-mask;
	z-index: 998;
}

/* 显示/隐藏控制 */
.show {
	display: block;
}

.show-flex {
	display: flex;
}

.show-inline {
	display: inline;
}

.show-inline-block {
	display: inline-block;
}

/* 可见性控制 */
.visible {
	visibility: visible;
}

.invisible {
	visibility: hidden;
}

/* 透明度 */
.opacity-0 {
	opacity: 0;
}

.opacity-50 {
	opacity: 0.5;
}

.opacity-75 {
	opacity: 0.75;
}

.opacity-100 {
	opacity: 1;
}

